<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="">
    <div id="app"></div>
    <script>

        function observe(target) {
            const div = document.getElementById('app')
            /*
            {
                title:'Vue',
                desc:'描述信息'
            }
            */
            let props = Object.keys(target)//['title','desc']
            let obj = {}
            for (const prop of props) {
                Object.defineProperty(obj, prop, {
                    //Obj.title = target.title
                    get() {
                        return target[prop]
                    },
                    // obj.title = zs
                    // 
                    set(value) {
                        target[prop] = value
                        render()
                    }
                })
            }

            // 将数据渲染到浏览器
            function render() {
                let html = ''
                for (const item of props) {
                    html += `<p>${item}-----${target[item]}`
                }
                div.innerHTML = html
            }
            render()

            return obj
        }
        let data = {
            title: 'vue',
            desc: '描述信息',
        }

        let obj1 = observe(data) //obj1 = obj

        document.querySelector('input').onkeyup = function () {
            obj1.title = this.value
        }
    </script>
</body>

</html>